<template>
  <div class="form-container">
    <el-input
      class="input"
      v-model="userName"
      style="width: 100%"
      placeholder="用户名"
      clearable
    >
      <template #prepend>
        <el-icon>
          <User />
        </el-icon>
      </template>
    </el-input>
    <el-input
      class="input"
      v-model="password"
      type="password"
      show-password
      style="width: 100%"
      placeholder="密码"
      clearable
    >
      <template #prepend>
        <el-icon>
          <Lock />
        </el-icon>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const userName = ref()
const password = ref()
</script>

<style scoped lang="scss">
.form-container {
  width: 100%;

  .input {
    margin-top: 20px;
    height: 40px;
  }
}
</style>
